import { ref, computed, reactive } from 'vue';

export default function useTodos() {
  let title = ref('');
  let todos = ref([{ title: '学习Vue', done: false }]);

  let animate = reactive({
    show: false,
    el: null,
  });

  function beforeEnter(el) {
    let dom = animate.el;
    let rect = dom.getBoundingClientRect();
    let x = window.innerWidth - rect.left - 60;
    let y = rect.top - 10;
    el.style.transform = `translate(-${x}px, ${y}px)`;
  }

  function enter(el, done) {
    document.body.offsetHeight;
    el.style.transform = `translate(0,0)`;
    el.addEventListener('transitionend', done);
  }

  function afterEnter(el) {
    animate.show = false;
    el.style.display = 'none';
  }

  function addTodo() {
    todos.value.push({
      title: title.value,
      done: false,
    });
    title.value = '';
  }

  function clear() {
    todos.value = todos.value.filter((v) => !v.done);
  }

  let active = computed(() => {
    return todos.value.filter((v) => !v.done).length;
  });

  let all = computed(() => todos.value.length);

  let allDone = computed({
    get: function () {
      return active.value === 0;
    },
    set: function (value) {
      todos.value.forEach((todo) => {
        todo.done = value;
      });
    },
  });

  function removeTodo(e, i) {
    animate.el = e.target;
    animate.show = true;
    setTimeout(() => {
      todos.value.splice(i, 1);
    }, 100);
  }

  return { title, todos, addTodo, clear, active, all, allDone, removeTodo, animate, beforeEnter, enter, afterEnter };
}
